<template>
  <div class="backgroundfunc">
    <h1>纯色背景</h1>
    <div class="bgwrap">
      <ColorPicker v-model="color" size="large" alpha/>
      <p>主题颜色</p>
      <div class="maincolor colorblock">
        <a href="#" style="background:#45a9b0;"></a>
        <a href="#" style="background:#07899b;"></a>
        <a href="#" style="background:#fdab02;"></a>
      </div>
      <p>预设</p>
      <div class="initcolor colorblock">
        <a href="#" style="background:#ff3d00;"></a>
        <a href="#" style="background:#ff8a65;"></a>
        <a href="#" style="background:#ffeb3b;"></a>
        <a href="#" style="background:#009688;"></a>
        <a href="#" style="background:#22d7bb;"></a>
        <a href="#" style="background:#03a9f4;"></a>
        <a href="#" style="background:#377bcf;"></a>
        <a href="#" style="background:#3f51b5;"></a>
        <a href="#" style="background:#5f1ec7;"></a>
        <a href="#" style="background:#6574c4;"></a>
        <a href="#" style="background:#fa72ff;"></a>
        <a href="#" style="background:#ffb9a3;"></a>
        <a href="#" style="background:#b3e0dc;"></a>
        <a href="#" style="background:#000000;"></a>
        <a href="#" style="background:#a5a5a5;"></a>
        <a href="#" style="background:#ffffff;"></a>
      </div>
      <div class="bgtype">
        <a href="#">我的图片</a>
        <a href="#" class="active">推荐图片</a>
        <a href="#">纹理图片</a>
      </div>
      <div class="bgcont">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data () {
            return {
                color: '#ffffff'
            }
        }
    }
</script>

<style scoped>
.backgroundfunc{position: fixed;width:330px;height: 100%; background: #fff;z-index: 999}
.backgroundfunc h1{font-size: 14px;color: #333;padding: 15px 0;text-align: center}
.bgwrap{width: 300px;margin: 0 auto}
.bgwrap p{margin: 15px 0;font-size: 14px;color: #696969;}
.bgwrap .colorblock{overflow: hidden}
.bgwrap .colorblock.initcolor{padding-bottom: 20px;border-bottom: 1px solid #e4e4e4}
.bgwrap .colorblock a{float: left; width: 35px;height: 35px;border: 1px solid #e4e4e4;}
.bgwrap .bgtype{width: 100%;height: 36px;line-height: 36px;text-align: center;background: #f2f2f2;margin-top: 15px;}
.bgwrap .bgtype a{display: inline-block;color: #696969;font-weight: bold;font-size: 14px;padding: 0 5px;}
.bgwrap .bgtype a:hover,.bgwrap .bgtype a.active{color: #22d7bb;}
.bgcont{height: 500px;width: 100%;margin-top: 10px;overflow-y: auto;}
.bgcont li{float: left;width: 88px;height: 88px;margin: 5px;background: #cfc}
</style>

